<template>
  <div>
    <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000" route placeholder>
      <van-tabbar-item icon="aim" to="/">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active?icon.imghome2:icon.imghome1" alt="">
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="aim" to="/book">
        <span>书影音</span>
        <template #icon="props">
          <img :src="props.active?icon.imgsubject2:icon.imgsubject1" alt="">
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="aim" to="/broadCast">
        <span>广播</span>
        <template #icon="props">
          <img :src="props.active?icon.imgstatus2:icon.imgstatus1" alt="">
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="aim" to="/group">
        <span>小组</span>
        <template #icon="props">
          <img :src="props.active?icon.imggroup2:icon.imggroup1" alt="">
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="aim" to="/my">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active?icon.imgprofile2:icon.imgprofile1" alt="">
        </template>
      </van-tabbar-item>
    </van-tabbar>

  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0,
      icon: {
        // 首页图标
        imghome1: require('../assets/images/ic_tab_home_active.png'),
        imghome2: require('../assets/images/ic_tab_home_normal.png'),
        // 书音图标
        imgsubject1: require('../assets/images/ic_tab_subject_normal.png'),
        imgsubject2: require('../assets/images/ic_tab_subject_active.png'),
        // 广播图标
        imgstatus1: require('../assets/images/ic_tab_status_normal.png'),
        imgstatus2: require('../assets/images/ic_tab_status_active.png'),
        // 小组图标
        imggroup1: require('../assets/images/ic_tab_group_normal.png'),
        imggroup2: require('../assets/images/ic_tab_group_active.png'),
        // 我的图标
        imgprofile1: require('../assets/images/ic_tab_profile_normal.png'),
        imgprofile2: require('../assets/images/ic_tab_profile_active.png')
      }
    }
  }
}
</script>

<style scoped>
img{
  width: 50px;
  height: 50px;
}
</style>
